<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML>
<html>
  <head>
    <title>凯盛项目管理系统</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="js/select2/select2.css" />
  </head>
  
  <body>
  	<%@ include file="top.jsp" %>
    <div class="container" style="margin-top:80px">
		<div class="row">
			<div class="span3">
				<div class="well" style="padding:10px 0;margin-top:20px;">
					<ul class="nav nav-list">
					  <li class="nav-header">${pu.project.name}</li>
					  <li >${sessionScope.user.username}:${pu.role}</li>
					  <li class="divider"></li>
					  <li ><a href="project.jspx?id=${pu.projectid}"><i class=" icon-home"></i>最新动态</a></li>
					  <li><a href="goal.jspx"><i class="icon-flag"></i>目标</a></li>
					  <li><a href="document.jspx"><i class="icon-folder-open"></i>资料库</a></li>
					  <li><a href="file.jspx"><i class="icon-file"></i>文件共享</a></li>
					  <li><a href="contact.jspx"><i class="icon-user"></i>联系人</a></li>
					  <li><a href="idea.jspx"><i class="icon-fire"></i>想法</a></li>
					  <li><a href="#"><i class="icon-warning-sign"></i>Bug</a></li>
					  <li class="active"><a href="main.jspx?m=editProject&id=${pu.projectid }"><i class="icon-white icon-cog"></i>项目设置</a></li>
					</ul>
				</div>
			</div>
			<div class="span6">
				<form action="main.jspx?m=editProject" id="myform" method="post" class="form-horizontal">
					<fieldset>
						<legend>项目设置</legend>
						<div class="control-group">
							<label for="input01" class="control-label">项目名称</label>
							<div class="controls">
								<input type="text" name="name" id="name"class="span5" value="${project.name}" style="height:24px"/>
								<span id="name-msg" style="color:red"></span><br/>
								<p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
							</div>
						</div>
						<div class="control-group">
							<label for="input01" class="control-label">项目描述</label>
							<div class="controls">
								<textarea cols="30" rows="5" class="span6" id="cont" name="cont">${project.cont}</textarea>
								<br><span id="cont-msg" style="color:red"></span><br/>
							</div>
						</div>
						<div class="controls-group">
							<label for="multiSelect" class="control-label">负责人</label>
							<div class="controls">
								<select class="multiSelect" name="manager" id="manager" style="width:200px">
									
									<c:forEach items="${requestScope.userlist }" var="u">
										<option value="${u.id }">${u.username }</option>				
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="control-group" style="margin-top:20px">
							<label for="input01" class="control-label" >项目成员</label>
							<div class="controls">
								<select  name="worker" id="worker" multiple class="multiSelect" style="width:400px">
									<c:forEach items="${requestScope.userlist }" var="u">
										<option value="${u.id }">${u.username }</option>				
									</c:forEach>
								</select>
								<span id="worker-msg" style="color:red"></span><br/>
							</div>
						</div>
						<input type="hidden" name="workers" id="workers"/>
						<input type="hidden" name="id" value="${ project.id}"/>
						<div class="form-actions">
							<button type ="button" id="btnSave"class="btn btn-primary">保存</button>
							<button class="btn" onclick="location.back()">返回</button>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/select2/select2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".multiSelect").select2();
			$("#btnSave").click(function(){
				var v =$("#worker").select2("val");
				if(!(v== null || v=="")) {
					$("#workers").val(v);
					$("#myform").submit();	
				}else {
					$("#myform").button();
				}				
			});
		});
		
		function validateName () {
			var name = document.getElementById("name").value;
			if(name.trim().length == 0) {
				return false;
			}
			return true;
		}
		
		document.getElementById("name").onblur = function () {
			var result = validateName();
			if(!result) {
				document.getElementById("name-msg").innerHTML = "×项目名称不能为空";
			}
		};
		
		document.getElementById("name").onkeyup = function () {
			document.getElementById("name-msg").innerHTML = "";
		};
		
		function validateCont () {
			var cont = document.getElementById("cont").value;
			if(cont.trim().length==0) {
				return false;
			} 
			return true;
		}
		document.getElementById("cont").onblur = function () {
			var result = validateCont();
			if(!result ) {
				document.getElementById("cont-msg").innerHTML = "×项目描述不能为空";
			}
		};
		document.getElementbyId("cont").onkeyup = function () {
			document.getElementById("cont-msg").innerHTML = "";
		};
		
		document.getElementById("btnSave").onclick = function () {
			if(validateName() && validateCont()) {
				document.getElementById("myform").submit();
			}
			document.getElementById("myform").button();
		};
	</script>
  </body>
</html>
